<template>
  <div class="container" v-if="$loadingRouteData">
    <p>loading...</p>
  </div>
  <div class="container" v-if="!$loadingRouteData">
    <div class="row">
      <reactive-container :reactive="[3, 3, 6, 6]">
        <box box-title="新增用户数" box-content="506">
          <small class="w-yesterday-profile clearfix">
            <label-text label-text="昨日"></label-text>
            <span class="w-secondary-value">358</span>
            <span class="w-secondary-value w-rais-percent">
              60%<icon-font class="w-rais-percent-icon" font="level-up"></icon-font>
            </span>
          </small>
        </box>
      </reactive-container>
      <reactive-container :reactive="[3, 3, 6, 6]">
        <box box-title="访问次数" box-content="554">
          <small class="w-yesterday-profile clearfix">
            <label-text label-text="昨日"></label-text>
            <span class="w-secondary-value">798</span>
            <span class="w-secondary-value w-rais-percent">
              60%<icon-font class="w-rais-percent-icon" font="level-down"></icon-font>
            </span>
          </small>
        </box>
      </reactive-container>
      <reactive-container :reactive="[3, 3, 6, 6]">
        <box box-title="播放时长" box-content="554">
          <small class="w-yesterday-profile clearfix">
            <label-text label-text="昨日"></label-text>
            <span class="w-secondary-value">798</span>
            <span class="w-secondary-value w-rais-percent">
              60%<icon-font class="w-rais-percent-icon" font="level-down"></icon-font>
            </span>
          </small>
        </box>
      </reactive-container>
      <reactive-container :reactive="[3, 3, 6, 6]">
        <box box-title="总用户量" box-content="179,602">
          <small class="w-yesterday-profile clearfix">
            <label-text label-text="昨日"></label-text>
            <span class="w-secondary-value">177,897</span>
            <span class="w-secondary-value w-rais-percent">
              60%<icon-font class="w-rais-percent-icon" font="level-down"></icon-font>
            </span>
          </small>
        </box>
      </reactive-container>
    </div><!-- end row -->
    <div class="row">
      <reactive-container>
        <box box-title="分时">
          <div class="row" id="w-product-hours-panel">
            <reactive-container :reactive="[9]">
              <bar-chart :chart-adapter="hoursAdapter"></bar-chart>
            </reactive-container>
            <reactive-container :reactive="[2]">
              <div id="w-product-total">
                <div class="container-fluid">
                  <div class="row">
                    <reactive-container :reactive="[12, 4, 4, 12]" no-padding>
                      <h1 class="w-total-value">4,443,220</h1>
                      <small>总访问量</small>
                    </reactive-container>
                    <reactive-container :reactive="[12, 4, 4, 12]" no-padding>
                      <h1 class="w-total-value">54,909</h1>
                      <small>总访问时长(小时)</small>
                    </reactive-container>
                    <reactive-container :reactive="[12, 4, 4, 12]" no-padding>
                      <h1 class="w-total-value">24</h1>
                      <small>日均时长(分钟)</small>
                    </reactive-container>
                  </div>
                </div>
              </div>
            </reactive-container>
          </div>
        </box>
      </reactive-container>
    </div><!-- end row -->
    <div class="row">
      <reactive-container>
        <box box-title="产品栏目">
          <table-view :table-adapter="categoryListAdapter"></table-view>
        </box>
      </reactive-container>
    </div>
  </div>
</template>

<script type="text/babel">
  import ReactiveContainer from './widgets/ReactiveContainer'
  import Box from './widgets/Box'
  import BarChart from './widgets/charts/BarChart'
  import LabelText from './widgets/LabelText'
  import IconFont from './widgets/IconFont'
  import TableView from './widgets/TableView'
  import Vue from 'vue'

  var ContentLink = Vue.extend({
    template: '<a class="w-link" href="#" v-link="linkPath">{{ linkText }}</a>',
    props: {
      cellData: Object
    },
    computed: {
      linkPath: function () {
        var self = this
        return {
          name: 'content',
          params: {
            contentId: self.cellData.id,
            categoryId: self.cellData.category,
            productId: self.cellData.product
          }
        }
      },
      linkText: function () {
        return this.cellData.name
      }
    }
  })
  Vue.component('content-link', ContentLink)

  var HoursAdapter = function () {
    var d = []
    for (var i = 0; i < 48; i++) {
      var h = parseInt(i / 2)
      var hour = h < 10 ? '0' + h : '' + h
      d.push({
        label: hour + (i % 2 ? ':30' : ':00'),
        value: parseInt(Math.random() * 100)
      })
    }
    this._series = d
  }
  HoursAdapter.prototype.seriesDatas = function () {
    return this._series
  }

  var CategoryAdapter = function () {
    var self = this
    self._headers = ['栏目名称', '内容量', '今日播放次数', '昨日播放次数', '今日播放时长', '昨日播放时长', '累计用户数']
    self.sortedKeys = ['categoryName', 'contentCount', 'todayPlayCount', 'yesterdayPlayCount',
      'todayDurationCount', 'yesterdayDurationCount', 'userCount']
    self.items = []

    var products = ['Mikeling', '郑多燕健身', '睿健时代', '王广成广场舞', '肚皮舞', '欢乐蹦蹦跳', '街舞', '瑜伽普拉提']
    products.forEach(function (item) {
      self.items.push({
        categoryName: item,
        contentCount: 0,
        todayPlayCount: 0,
        yesterdayPlayCount: 0,
        todayDurationCount: 0,
        yesterdayDurationCount: 0,
        userCount: 0
      })
    })

    self.header = (column, key) => self._headers[column]
    self.item = (row, column, item, key) => {
      if (key !== 'categoryName') {
        return item[key]
      } else {
        return {
          name: item[key],
          id: 1,
          product: 2
        }
      }
    }
    self.itemType = (row, column, key) => {
      if (key === 'categoryName') {
        return 'content-link'
      } else {
        return false
      }
    }
  }

  export default {
    components: {
      ReactiveContainer,
      Box,
      BarChart,
      LabelText,
      IconFont,
      TableView
    },
    route: {
      data: function (transition) {
        setTimeout(function () {
          transition.next()
        }, 2000)
      },
      activate: function (transition) {
        console.log('category ==>')
        transition.next()
      },
      deactivate: function (transition) {
        console.log('category <==')
        transition.next()
      }
    },
    data: function () {
      return {
        hoursAdapter: new HoursAdapter(),
        categoryListAdapter: new CategoryAdapter()
      }
    },
    ready: function () {
    }
  }
</script>

<style lang='less'>
  #w-product-hours-panel {
    padding-top: 14px;
  }
  #w-product-total {
    margin-top: 8px;
    margin-left: 15px;
  }
  .w-total-value {
    font-weight: lighter;
    margin: 0px;
  }
</style>
